<template>
  <div id="App">
    <div class="tubiao" ref="zhanshi"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  data() {
    return {
      myChart: null
    };
  },
  mounted() {
    this.myChart = echarts.init(this.$refs.zhanshi);
    this.drawChart();
    window.addEventListener('resize', this.handleResize);
  },
  methods: {
    drawChart() {
      this.myChart.setOption({
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      });
    },
    handleResize() {
      this.myChart.resize();
    }
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
  }
}
</script>

<style lang="less" scoped>
.tubiao {
  width: 100%;
  /* 使用百分比来适应容器大小 */
  height: 400px;
  /* 设置一个固定的高度 */
  margin: 100px auto;
}
</style>
